import React, { useEffect, useState, useRef } from 'react';

const Modal = () => {
    const [size, setSize] = useState(200);
    const textareaRef = useRef(null);
    const updateSize = () => {
        console.log(size);
        if (textareaRef.current) {
            setSize(
                textareaRef.current.offsetWidth,
            );
        }
    };

    useEffect(() => {
        const handleMouseMove = () => {
            updateSize()

        };

        const handleMouseUp = () => {
            document.removeEventListener('mousemove', handleMouseMove);
            document.removeEventListener('mouseup', handleMouseUp);

        };

        const handleMouseDown = () => {
            document.addEventListener('mousemove', handleMouseMove);
            document.addEventListener('mouseup', handleMouseUp);
        };

        const textareaElement = textareaRef.current;
        if (textareaElement) {
            textareaElement.addEventListener('mousedown', handleMouseDown);
        }

        return () => {
            if (textareaElement) {
                textareaElement.removeEventListener('mousedown', handleMouseDown);
            }
            document.removeEventListener('mousemove', handleMouseMove);
            document.removeEventListener('mouseup', handleMouseUp);
        };
    }, []);

    return (
        <div className='modal'>
            <div>
                <div className='header' style={{ width: `${size}px` }}>

                </div>
                {/* <div>
                    X
                </div> */}
            </div>
            <div>
                <textarea className='tetxarea' ref={textareaRef} >
                    商户唯一标识，由系统生成，无法修改
                </textarea>
              

            </div>
        </div>
    );
};

export default Modal;
